<template>
  <div class="user-info-wrapper">
    <el-row justify="center">
      <el-avatar :size="70" :src="avatarUrl" />
    </el-row>
    <el-row class="nickname" justify="center">{{ nickname }}</el-row>
    <el-row justify="center">
      <ScoreBar :name="score1.name" :num="score1.num"></ScoreBar>
      <el-divider direction="vertical" />
      <ScoreBar :name="score2.name" :num="score2.num"></ScoreBar>
    </el-row>
    <el-row class="sign" justify="center">
      <p>{{ signature || "这个人没有写任何签名..." }}</p>
    </el-row>
    <el-row justify="center">
      <el-button @click="handleEdit" class="edit-user-btn" type="primary" plain>
        编辑个人资料
      </el-button>
    </el-row>
  </div>
</template>

<script>
import ScoreBar from '@/components/ScoreBar.vue'
// import { mapState } from 'vuex'
export default {
  components: {
    ScoreBar,
  },
  props: {
    avatarUrl: {
      type: String,
      default: ""
    },
    nickname: {
      type: String,
      default: ""
    },
    signature: {
      type: String,
      default: ""
    },
    score1: {
      type: Object,
      default: () => ({ name: "", num: 0 })
    },
    score2: {
      type: Object,
      default: () => ({ name: "", num: 0 })
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleEdit() {
      this.$emit('edit')
    }
  }
}
</script>

<style lang="scss" scoped>
.user-info-wrapper {
  .nickname {
    font-size : 14pt;
    padding : 14px 0;
  }

  .el-divider {
    margin-top : 10px;
    height : 40px;
  }

  .sign {
    color : var(--el-text-color-secondary);
  }

  .edit-user-btn.el-button {
    width : 180px;
  }
}

</style>
